<!-- 图表列表 -->
<template>
    <div id="chartList">
        <div v-for="(chart, index) in chartList" :key="index" class="chart-item" :style="{ height: chart.height }">
            <div class="title">
                <div>{{ chart.name }}</div>
                <div class="en-name">{{ chart.enName }}</div>
            </div>
            <!-- 组件 -->
            <div class="chart-component">
                <component :ref="chart.url" :is="chart.url"></component>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "chart-list",
    props: ["chartList"],//用于接收父组件传来的chartList的值
    components: {
        total: (resolve) => require(["./charts/total.vue"], resolve), //门诊总人数/占比
        outpatient: (resolve) => require(["./charts/outpatient.vue"], resolve), //中医药门急诊占比
        management: (resolve) => require(["./charts/management.vue"], resolve), //慢病患者管理率
        inpatients: (resolve) => require(["./charts/inpatients.vue"], resolve), //住院总人次/占比
        operationIndex: (resolve) =>
            require(["./charts/operationIndex.vue"], resolve), //出入院运行指标
        overview: (resolve) => require(["./charts/overview.vue"], resolve), //总床位数
        totalIncome: (resolve) =>
            require(["./charts/totalIncome.vue"], resolve), //医院总收入/收入占比
        medicalInsurance: (resolve) =>
            require(["./charts/medicalInsurance.vue"], resolve), //当日医保统筹占比
        drugs: (resolve) => require(["./charts/drugs.vue"], resolve), //药品/耗材收入占比
        outpatientRevenue: (resolve) =>
            require(["./charts/outpatientRevenue.vue"], resolve), //门诊收入
        outpatientCost: (resolve) =>
            require(["./charts/outpatientCost.vue"], resolve), //门诊人均费用/住院治疗收入
        operationIncome: (resolve) =>
            require(["./charts/operationIncome.vue"], resolve), //住院人均费用/手术收入占比
        topTenDrug: (resolve) => require(["./charts/topTenDrug.vue"], resolve), //药物总数TOP10
        essentialDrugs: (resolve) =>
            require(["./charts/essentialDrugs.vue"], resolve), //基本药物总数/使用占比
        twoDiseases: (resolve) =>
            require(["./charts/twoDiseases.vue"], resolve), //两病用药
        antibacterial: (resolve) =>
            require(["./charts/antibacterial.vue"], resolve), //抗菌药总数/抗菌药物排名
        usageRate: (resolve) => require(["./charts/usageRate.vue"], resolve), //抗菌药使用率
        antiTumor: (resolve) => require(["./charts/antiTumor.vue"], resolve), //抗肿瘤药物使用率
    },
    data() {
        return {};
    },

    methods: {},
};
</script>
<style lang="scss" scoped>
#chartList {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;

    // background:rgba(255,255,255,0.1);
    &:hover {
        overflow: hidden;
    }

    .chart-item {
        height: 33.4%;
        // border-left: 1px solid #1d5acc;
        // border-right: 1px solid #1d5acc;
        // background: #071f4f;
        position: relative;

        .top-img {
            width: 100%;
            height: 48px;
        }

        .title {
            height: 50px;
            width: 100%;
            font-size: 23px;
            font-weight: bold;
            font-style: oblique;
            color: #fff;
            text-shadow: 0px 1px 2px #333fff;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            top: 7px;
            padding-left: 20px;

            .en-name {
                font-size: 14px;
                font-weight: normal;
                opacity: 0.4;
            }
        }

        .chart-component {
            width: 100%;
            height: calc(100% - 55px);
        }
    }
}
</style>